<template>
  <view class="order-detail-page" style="background-color: #f5f5f5; min-height: 100vh;">
    <!-- 标题栏 -->
    <view style="padding: 15px; text-align: center; position: relative; border-bottom: 1px solid #eee;">
      <text style="font-size: 18px; font-weight: bold;">订单详情</text>
    </view>

    <!-- 订单主要内容 -->
    <view style="padding: 20px 15px;">
     

      <!-- 订单详情卡片 -->
      <view style="background-color: #fff; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
		<!-- 微信提现信息 -->
		<view style="text-align: center; margin-bottom: 25px;">
		  <view style="width: 50px; height: 50px; background-color: #07c160; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 10px;">
		    <text style="color: #fff; font-size: 24px;">微</text>
		  </view>
		  <text style="font-size: 16px; display: block; margin-bottom: 5px;">微信提现</text>
		  <text style="font-size: 24px; font-weight: bold; display: block;">1000.00</text>
		</view>
		  
        <view style="margin-bottom: 15px;">
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">当前状态</text>
          <text style="font-size: 16px; display: block;">支付成功</text>
        </view>
        
        <view style="margin-bottom: 15px;">
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">支付时间</text>
          <text style="font-size: 16px; display: block;">2023-10-03 18:10:23</text>
        </view>
        
        <view style="margin-bottom: 15px;">
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">商户全称</text>
          <text style="font-size: 16px; display: block;">中景商业支付有限公司</text>
        </view>
        
        <view style="margin-bottom: 15px;">
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">收款账户</text>
          <text style="font-size: 16px; display: block;">微信余额</text>
        </view>
        
        <view style="margin-bottom: 15px;">
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">支付方式</text>
          <text style="font-size: 16px; display: block;">余额</text>
        </view>
        
        <view>
          <text style="font-size: 14px; color: #999; display: block; margin-bottom: 5px;">交易单号</text>
          <text style="font-size: 16px; display: block;">34756207420836574207356830</text>
        </view>
      </view>

      <!-- 账单服务 -->
      <view style="margin-bottom: 30px;">
        <view style="background-color: #fff; border-radius: 8px; padding: 15px;">
          <!-- 备注行 -->
		  <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 15px;">账单服务</text>
          <view style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5;">
            <text style="font-size: 14px; color: #333;">备注</text>
            <view style="display: flex; align-items: center;">
              <text style="font-size: 14px; color: #1a73e8; margin-right: 5px;">添加</text>
              <view style="width: 12px; height: 12px; border-top: 2px solid #1a73e8; border-right: 2px solid #1a73e8; transform: rotate(45deg);"></view>
            </view>
          </view>
          
          <!-- 底部按钮行 -->
          <view style="display: flex; justify-content: space-between;">
            <view style="display: flex; align-items: center;">
              <!-- 查看图标 -->
              <view style="width: 16px; height: 16px; margin-right: 8px; position: relative;">
                <view style="position: absolute; top: 0; left: 0; width: 14px; height: 10px; border: 2px solid #666; border-radius: 2px;"></view>
                <view style="position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border: 2px solid #666; border-radius: 50%;"></view>
              </view>
              <text style="font-size: 14px; color: #666;">查看往来记录</text>
            </view>
            
            <view style="display: flex; align-items: center;">
              <!-- 疑问图标 -->
              <view style="width: 16px; height: 16px; margin-right: 8px; position: relative;">
                <view style="position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 2px solid #666; border-radius: 50%;"></view>
                <text style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: #666;">?</text>
              </view>
              <text style="font-size: 14px; color: #666;">对此账单有疑问</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // 页面逻辑可以留空或添加需要的功能
}
</script>

<style>
.order-detail-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>